<script>
export default {
  name: "itemList",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    detail() {
      let item = this.item
      return {
        ...item,
        gradeList: this.formatGarde(item.grade)
      }
    }
  },
  methods: {
    formatGarde(grade) {
      if (!grade) return []
      const grades = {
        '1': '一年级',
        '2': '二年级',
        '3': '三年级',
        '4': '四年级',
        '5': '五年级',
        '6': '六年级',
      }
      try {
        const gardeArr = grade.split(',')
        return gardeArr.map(garde => grades[garde])
      } catch (e) {
        return grade
      }
    },
    handleDetail(item) {
      uni.navigateTo({
        url: '/pages/course/detail?id=' + item.id
      })
    },
  }
}
</script>

<template>
  <view class="house-item" @click="handleDetail(item)">
    <image class="house-image" :src="detail.logo" mode="aspectFit" />
    <view class="house-info">
      <text class="house-title">{{ detail.name }}</text>
      <view class="house-detail">
        <text class="location">{{ detail.address }}</text>
      </view>
      <view class="house-detail">
        <text class="area">{{ detail.schedule }}</text>
        <view class="line"></view>
        <text class="area" style="flex-shrink: 0">{{ detail.teacher_name }}</text>
      </view>
      <view class="house-price">
        <text class="price"><text class="unit">总</text>{{ detail.total_count }}<text class="unit">人</text></text>
        <text class="unit-price">已报{{ detail.signed_count }}人</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">

.house-item {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 24rpx;
  display: flex;
}

.house-image {
  width: 240rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 32rpx;
  flex-shrink: 0;
}

.house-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.house-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.house-detail {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.location, .area, .type {
  font-size: 14px;
  color: #666666;
}
.line {
  height: 20rpx;
  width: 2rpx;
  background-color: #DCDCDC;
  margin: 0 24rpx;
}
.house-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.price {
  font-size: 20px;
  color: #FF6B6B;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #FF6B6B;
  margin-left: 4rpx;
}

.unit-price {
  font-size: 14px;
  color: #999999;
  margin-left: 24rpx;
}
</style>
